import React from "react";
import styles from "./index.module.less";
import Tag from "@components/tag";
import moment from "moment";

const QuestionShow = (props) => {
    const {
        isShowTag,
        title,
        cateTags,
        isResolved,
        publishDate,
        numbers,
        focusNames,
        rewardGmoney,
    } = props;

    return (
        <div className={styles.question_show}>
            <div className={styles.top}>
                <p className={styles.main_title}>{title}</p>
                {cateTags &&
                    cateTags.map((item, index) => {
                        return <Tag key={index} tag={item} />;
                    })}
                {isShowTag ? (
                    <Tag
                        type={
                            isResolved
                                ? "success"
                                : isResolved === false
                                ? "danger"
                                : ""
                        }
                        tag={
                            isResolved
                                ? "已解决"
                                : isResolved === false
                                ? "未解决"
                                : ""
                        }
                    />
                ) : undefined}
            </div>
            <div className={styles.down}>
                <span className={styles.publish_date}>
                    <strong>·</strong> 发布于{moment(publishDate).fromNow()}
                </span>
                <span className={styles.answer_numbers}>
                    <strong>·</strong> {numbers}条回答
                </span>
                <span className={styles.focus_this}>
                    <strong>·</strong> {focusNames.length}人已关注该问题
                </span>
                <span className={styles.rewardGmoney}>
                    <strong>·</strong> 悬赏G币：
                    <strong style={{ color: "red" }}>{rewardGmoney}</strong>G
                </span>
            </div>
        </div>
    );
};

export default QuestionShow;
